<template>
  <view class="container tab-bar">
    <scroll-view scroll-y>
      <!-- 日历 -->
      <view class="calendar-box">
        <uni-calendar
          ref="calendar"
          :start-date="'2019-1-1'"
          :end-date="'2019-1-31'"
          :showMonth="false"
          @change="calendarChange"
        />
      </view>

      <!-- 任务列表 -->
      <view class="task-box">
        <!-- <task-list :taskList="taskList" v-on:checkboxChange="checkboxChange" /> -->
        <view
          class="task-item"
          v-for="item in taskList"
          :key="item.uuid"
          @click.stop="checkTask(item.uuid)"
        >
          <view class="item-left">
            <checkbox
              :value="item.uuid"
              :checked="item.w_status == 0 ? false : true"
              @click.stop="checkboxChange(item.uuid)"
            />
          </view>
          <!-- 任务名称 -->
          <view class="item-center">
            <text>{{ item.w_name }}</text>
            <text>{{ item.w_label }}</text>
          </view>
          <!-- 任务时间 -->
          <view class="item-right">
            <text class="task-time">
              {{ item.w_remind | formatDate("MM-dd hh:mm") }}
            </text>
          </view>
        </view>
      </view>
    </scroll-view>

    <TabBar :tabbar="tabbar" />
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import TabBar from "../../component/TabBar/TabBar";
import uniCalendar from "../../component/uni-calendar/uni-calendar";
import TaskList from "../../component/TaskList/TaskList";
// 引入接口
const {
  getWorkByDate,
  changeWorkStatus,
} = require("../../api/calendar/calendar");
const { format } = require("../../utils/utils");

export default {
  props: {},
  components: { TabBar, uniCalendar, TaskList },
  data() {
    return {
      // 任务数据
      taskList: [],
    };
  },
  computed: {
    ...mapState(["tabbar"]),
  },
  watch: {},
  methods: {
    ...mapMutations(["editTabbar"]),
    // 任务状态改变
    checkboxChange(uuid) {
      const index = this.taskList.findIndex(item => item.uuid == uuid);
      console.log(index);
      if (index != -1) {
        // 更改任务状态请求
        changeWorkStatus({ wid: uuid }).then(
          res => {
            this.taskList[index].w_status =
              this.taskList[index].w_status == 0 ? 1 : 0;
          },
          err => {
            uni.showToast({ title: err, icon: "none" });
          }
        );
      }
    },
    // 查看任务
    checkTask(uuid) {
      if (uuid == "") return;
      uni.navigateTo({
        url: "../addtask/addtask?uuid=" + uuid,
      });
    },
    // 日期改变
    calendarChange(e) {
      this.getTaskDate(e.fulldate);
    },
    // 获取任务数据
    getTaskDate(date) {
      let params = {
        date,
        code: uni.getStorageSync("openId"),
        mode: "create",
      };

      getWorkByDate(params).then(
        res => {
          this.taskList = res ? res : [];
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
        }
      );
    },
  },
  created() {
    // 设置TabBar
    this.editTabbar();
    // 获取任务数据
    this.getTaskDate(format(new Date(), "yyyy-MM-dd"));
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.container {
  // 日历模块
  .calendar-box {
    height: 612rpx;
    padding: 0 10rpx;
  }

  .task-box {
    padding: 0 30rpx;

    .task-item {
      display: flex;
      position: relative;
      margin-bottom: 20rpx;
      padding: 30rpx 20rpx 30rpx 0;
      background-color: #fff;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12rpx;
        height: 40rpx;
        background-color: #666ee8;
      }

      .item-left {
        width: 10%;

        & > checkbox {
          position: absolute;
          top: 50%;
          left: 4%;
          transform: translateY(-50%);
        }
      }

      .item-center {
        flex: 1;
        display: flex;
        padding: 0 20rpx;
        flex-direction: column;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;

        & text:first-child {
          color: #333333;
        }

        & text:last-child {
          font-size: 24rpx;
          color: #cccccc;
        }
      }

      .item-right {
        width: 200rpx;
        position: relative;

        .task-time {
          position: absolute;
          top: 0;
          right: 0;
          height: 48rpx;
          padding: 8rpx 20rpx;
          line-height: 32rpx;
          background-color: #f2f2f2;
          border-radius: 24rpx;
          text-align: center;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }
  }
}
</style>
